<template>
    <div id="C_Login">
        <div id="cb_content">
            <div id="cb_logo" style="display: flex;justify-content: center">
                <img src="../assets/images/logo.png" alt="">
                <h1 style="color: #1AA5FF">同程管理系统</h1>
            </div>
            <div id="cb_xuanzhe">
                <el-tabs v-model="activeName" :stretch="true" style="width: 380px">
                    <el-tab-pane label="密码登录" name="first">
                        <div class="cbyangshi  clear" id="username">
                            <span class="cb_lab"><svg class="icon" aria-hidden="true"><use
                                    xlink:href="#icon-zhanghaosvg"></use></svg></span>
                            <input @keyup.enter="C_shouye" v-model="user" class="cb_input" id="cb_name" type="text" placeholder="请输入账号">
                        </div>
                        <div class="cbyangshi  clear" id="password">
                            <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mima"></use></svg></span>
                            <input @keyup.enter="C_shouye" v-model="pwd" class="cb_input" type="password" placeholder="请输入密码">
                        </div>
                        <div class="cbyangshi" id="cb_zhuce">
                            <span class="cb_span" v-on:click="cb_toregister">立即注册</span>
                            <a href="http://passport.58.com/sec/complainv2/pc/index"><span class="cb_span">忘记密码?</span></a>
                        </div>
                        <div class='login_btn' v-on:click.stop="C_shouye">
                            <span class="span1">登</span>
                            <span class="span2">录</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="验证码登录" name="second">
                        <div id="cb_phone">
                            <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use
                                    xlink:href="#icon-shouji"></use></svg></span>
                            <input class="cb_input" @blur="to_yanzheng" v-model="phone" type="text"
                                   placeholder="请输入手机号">
                            <span id="cb_huoqu" v-on:click="to_yanzheng2">获取动态码</span>
                        </div>
                        <div id="cb_dong">
                            <span class="cb_lab"><svg class="icon2" aria-hidden="true"><use
                                    xlink:href="#icon-sousuo"></use></svg></span>
                            <input v-model="security" class="cb_input" type="text" placeholder="请输入动态码">
                        </div>
                        <div class='login_btn' v-on:click="cb_duanxin">
                            <span class="span1">登</span>
                            <span class="span2">录</span>
                        </div>


                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import api from '../tool/api'
    import {mapActions, mapState, mapGetters, mapMutations} from 'vuex'

    export default {
        name: 'Login',
        data() {
            return {
                activeName: 'first',
                phone: "",
                security: '',//验证码
                user: "",//用户名
                pwd: "",//密码
            }
        },
        methods: {
            ...mapMutations(["changeAdmin"]),

            //点击登录按钮
            C_shouye() {
                if (this.user && this.pwd) {
                    //input框输入的信息，传递给后端
                    let user = {
                        backUserName: this.user,
                        backUserPassword: this.pwd
                    };
                    //请求头
                    let config = {
                        headers: {'Content-Type': 'application/json;'}
                    }
                    //发起请求
                    axios.post(api.cb_login, user, config).then(res => {
                   /*     console.log(res)*/
                           if (res.data.code===200) {
                               //判断是否为 admin
                               if(this.user=="admin"){
                                   sessionStorage.setItem("isAdmin","true")
                               }else {
                                   sessionStorage.setItem("isAdmin","")
                               }
                               //将信息存在token
                               sessionStorage.setItem("token",res.data.data.token)
                               sessionStorage.setItem("username",res.data.data.name)
                               sessionStorage.setItem("backUserId",res.data.data.backUserId)
                               sessionStorage.setItem("roleId",res.data.data.roleId)
                               this.$router.push('/index');
                               /*以下代码是测试登录之后获取权限用的*/
                               axios.post(api.cb_login_test,{roleId:1},config).then(res=>{
                                  /* console.log(res);*/
                               });
                               axios.post(api.cb_login_test,{roleId:2},config).then(res=>{
                                  /* console.log(res);*/
                               })
                           }
                    }).catch(error => {
                        this.$message({
                            message: '输入账号密码有误！',
                            type: 'warning'
                        });
                    })
                }
                else {
                    this.$message({
                        message: '账号与密码不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
            },
            //前往注册页面
            cb_toregister() {
                this.$router.push('/register');
            },
            //验证手机号
            to_yanzheng() {
                /*console.log(this.phone)*/
                let phonenum = this.phone
                if (phonenum == '') {
                    this.$message({
                        message: '手机号不能为空',
                        type: 'warning'
                    })
                } else if (!(/^1[3456789]\d{9}$/.test(phonenum))) {
                    this.$message({
                        message: '手机号填写有误！',
                        type: 'warning'
                    });
                }
            },
            //手机号无误
            to_yanzheng2() {
                /*console.log(this.phone)*/
                let phonenum = this.phone
                if (phonenum === '') {
                    this.$message({
                        message: '手机号不能为空',
                        type: 'warning'
                    })
                } else if (!(/^1[3456789]\d{9}$/.test(phonenum))) {
                    this.$message({
                        message: '手机号填写有误！',
                        type: 'warning'
                    });
                } else {
                    this.$message({
                        message: '验证码已发送',
                        type: 'warning'
                    })
                }
            },
            //短信登录点击验证
            cb_duanxin() {
                let num1 = this.phone
                let num2 = this.security
                if (num1 == "" || num2 == "") {
                    this.$message({
                        message: '信息不完整',
                        type: 'warning'
                    })
                } else if (num2 != "" && num1 != "" && (/^1[3456789]\d{9}$/.test(num1))) {
                    this.$message({
                        message: '登录成功',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '手机号有错',
                        type: 'warning'
                    })
                }

            }

        },
        computed:{
           /* ...mapGetters(['isAdmin']),*/
        }
    }
</script>
<style lang="less" scoped>
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }

    .icon {
        width: 1.2em;
        height: 1.2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    .icon2 {
        width: 1.2em;
        height: 1.2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    * {
        margin: 0;
        padding: 0;
    }

    #C_Login {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("../assets/images/login-bg.png");
    }

    #cb_content {
        width: 450px;
        height: auto;
        margin: 100px auto 0px auto;
        /*top: 10%;
        left:34%;*/
        background: rgba(255, 255, 255, .9);
        border-radius: 4px;
        padding: 40px 0px 80px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #cb_logo {
        text-align: center;
    }

    #cb_logo img {
        width: 40px;
        height: 40px;
    }

    /* //标签选择*/
    #cb_xuanzhe {
        margin-top: 30px;
        /*  border: cornflowerblue 1px solid;*/
        /*width: 400px;
        height: 350px;*/
    }


    //登录部分
    #username {
        margin: 40px auto 20px auto;
        width: 378px;
        height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius: 6px;
        line-height: 34px;
    }

    #password {
        margin: 15px auto;
        width: 378px;
        height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius: 6px;
        line-height: 34px;
    }

    .cb_input {
        outline: none;
        border: none;
        height: 23.5px;
        /*margin-left: .1rem;*/
        width: 220px;
    }

    //立即注册和忘记密码
    .cb_span {
        margin-left: 80px;
        color: cornflowerblue;
        cursor: pointer;
    }

    //登录按钮部分
    .login_btn {
        display: block;
        margin: 30px auto auto auto;
        width: 378px;
        height: 34px;
        line-height: 34px;
        background-color: #1AA5FF;
        color: white;
        font-weight: bolder;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        letter-spacing: 10px;
        text-align: center;
    }

    .span1 {
        margin-right: 30px;
    }

    .span2 {
        margin-left: 30px;
    }


    //手机号登录部分
    #cb_phone {
        margin: 40px auto 20px auto;
        width: 378px;
        height: 34px;
        line-height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius: 6px;
        line-height: 34px;
    }

    #cb_dong {
        margin: 15px auto;
        width: 378px;
        height: 34px;
        line-height: 34px;
        background: white;
        border: cornflowerblue 1px solid;
        border-radius: 6px;
    }

    #cb_huoqu {
        font-size: 0.8em;
        width: 20px;
        height: 22px;
        background: rgba(128, 128, 128, 0.5);
        border-radius: 4px;
        cursor: pointer;
        margin-left: 20px;
    }

    //修改el-tab-pane的默认样式
    a{
        text-decoration:none;
    }


</style>
